
import { useTranslation } from 'react-i18next'
import { Link, useNavigate } from "react-router-dom";
import HeaderTitle from "../login/header";
import style from "./index.module.less"
import React, { Fragment, useState ,useEffect} from 'react'
import { Modal, Input ,message} from 'antd';

import { login,banklist,setBankApi,getBankApi } from "@/apis/user.js"

let user = {}
const Cardmanage = (props) => {
	const navigate = useNavigate()
	const [isModalOpen, setIsModalOpen] = useState(false);
	const [selecttab,setselecttab]=useState(1)
	const [data,setData]=useState([])
	const [bank,setBank]=useState('')
	const [name,setName]=useState('')
	const [show,setshow]=useState(1)
	const [username,setUsername]=useState('')
	const [bindbank,setbindbank]=useState([])
	useEffect(() => {
		setTimeout(()=>{
			if (window.scrollTo) {
				window.scrollTo(0, 0);
			} else if (document.body.scrollTop) {
				document.body.scrollTop = 0;
			} else {
				document.documentElement.scrollTop = 0;
			}
			document.getElementById('root').scrollIntoView(true);
			document.getElementById('body').scrollIntoView(true);
		},0)
		getAdapter()
		getbindbanks()
		user = JSON.parse(localStorage.getItem("info"))
		setName(user.real_name)
		return ()=>{}
	  }, []);
	const showModal = () => {
		setIsModalOpen(true);
	};
	
	const handleCancel = () => {
		setIsModalOpen(false);
	};
	
	const changeTab=(current)=>{
		setselecttab(current) //更新 active 状态
	}
	const getAdapter = ()=>{
		banklist().then(res => {
			setData(res.data)
     			 //message.info(res.status.msg)
		})
	}
	const getbindbanks = () => {
		getBankApi().then(res=>{
			if(res.status.errorCode == 0){
				setbindbank(res.data)
				setshow(2)
			}
		})
	}
	const submit = ()=>{
		if(bank == '' || name == '' || username ==''){
			message.error(t('cardmanage.title1'))
			return
		}
		setBankApi({bank,name,username,type:selecttab}).then(res => {
			0 == res.status.errorCode ? message.success(res.status.msg) : message.error(res.status.msg);
			getAdapter()
			getbindbanks()
			setIsModalOpen(false);
		})
	}
	const { t } = useTranslation();
	
	return (
		<React.Fragment>
			<HeaderTitle title={t('cardmanage.title1')} right_title={t('agent.title2')}/>
			<div className={style['main']}>
				<div className={style['header_group']}>
					<div className={style['TitGroup']}>
						<div className={style['iconBox']}>
							<div className={style['icon_img']}></div>
						</div>
						<div className={style['txt_tit']}>{t('cardmanage.title2')} {t('cardmanage.title19')}</div>
					</div>
				</div>
				<div className={style['content_group']}>
					<div className={style['main_content']}>
						<div className={style['icon_group']}>
							<div className={style['data_group']}>
								<div className={style['data_group_box']}>
									
									{/*{data.length > 0 && (
										data.map((item,index)=>{
										return (
											<div className={style['data_group_box_item']} key={index}>
											<div className={style['txt_title']}>{item.bank_name}</div>
											<div className={style['txt_content']}>
												<p>
													<span className={style['txt_no']}>{item.bank_id}</span>
													<span className={style['txt_account']}>GUTIANLE</span>
												</p>
											</div>
											 选中的图片加在下面div的背景图片 样式已经写好了
											<div className={style['arrow']}></div>
										</div>
										);
										})
									)}*/}
									{
										bindbank.yinhangka_bank ? (<div className={style['data_group_box_item']}>
											<div className={style['txt_title']}>銀行卡:  {bindbank?.yinhangka_bank}</div>
											<div className={style['txt_content']}>
												<p>
													<span className={style['txt_no']}>{bindbank?.yinhangka_username}</span>
													{/* <span className={style['txt_account']}>GUTIANLE</span> */}
												</p>
											</div>
											{/* 选中的图片加在下面div的背景图片 样式已经写好了 */}
											<div className={style['arrow']}></div>
										</div>) : ""
									}
									{
										bindbank.USDT_username ? (<div className={style['data_group_box_item']}>
											<div className={style['txt_title']}>USDT:  {bindbank?.USDT_username}</div>
											<div className={style['txt_content']}>
												<p>
													<span className={style['txt_no']}>{bindbank?.USDT_name}</span>
													{/* <span className={style['txt_account']}>GUTIANLE</span> */}
												</p>
											</div>
											{/* 选中的图片加在下面div的背景图片 样式已经写好了 */}
											<div className={style['arrow']}></div>
										</div>) : ""
									}
									{
										bindbank.zhuanshukuai_yinghang ? (<div className={style['data_group_box_item']}>
											<div className={style['txt_title']}>{t('agent.title13')}:  {bindbank?.zhuanshukuai_yinghang}</div>
											<div className={style['txt_content']}>
												<p>
													<span className={style['txt_no']}>{bindbank?.zhuanshukuai_username}</span>
													{/* <span className={style['txt_account']}>GUTIANLE</span> */}
												</p>
											</div>
											{/* 选中的图片加在下面div的背景图片 样式已经写好了 */}
											<div className={style['arrow']}></div>
										</div>) : ""
									}
									{/* <div className={style['data_group_box_item']}>
										<div className={style['txt_title']}>003 渣打銀行(香港)有限公司</div>
										<div className={style['txt_content']}>
											<p>
												<span className={style['txt_no']}>2323**********2323</span>
												<span className={style['txt_account']}>GUTIANLE</span>
											</p>
										</div>
										<div className={style['arrow']}></div>
									</div> */}
								</div>
								{
									(!bindbank.yinhangka_bank && !bindbank.USDT_username && !bindbank.zhuanshukuai_yinghang && show == 2) && (	
											<div className={style['AddCardGroup']}>
											<div className={style['addCard_bg']} onClick={showModal}></div>
											<div className={style['txt_tit']} onClick={showModal}>
												<span className={style['hit-text']}>[</span>
												<span className={style['hit-text']}>{t('cardmanage.title3')} </span>
												<span>{t('cardmanage.title4')}</span>
												<span className={style['hit-text']}>]</span>
											</div>
										</div>
										)
								}
											{/* <div className={style['AddCardGroup']}>
											<div className={style['addCard_bg']} onClick={showModal}></div>
											<div className={style['txt_tit']} onClick={showModal}>
												<span className={style['hit-text']}>[</span>
												<span className={style['hit-text']}>{t('cardmanage.title3')} </span>
												<span>{t('cardmanage.title4')}</span>
												<span className={style['hit-text']}>]</span>
											</div>
										</div> */}


							</div>
						</div>
					</div>
				</div>
			</div>
			<Modal open={isModalOpen} footer={[]} centered closeIcon={false}>
				<div className={style['modalcon']}>
					<div className={style['modalcontitle']}>{t('cardmanage.title5')}</div>
					<div className={style['close']} onClick={handleCancel}></div>
					<div className={style['modalconbody']}>
						<div className={style['tabs']} style={{'justifyContent': 'center'}}>
							<div className={`${style['tabsitem']} ${selecttab === 1 ? style['active'] : ''}`} onClick={()=>{changeTab(1)}}>{t('cardmanage.title6')}</div>
							<div className={`${style['tabsitem']} ${selecttab === 2 ? style['active'] : ''}`} onClick={()=>{changeTab(2)}}>{t('cardmanage.title7')}</div>
						{/*	<div className={`${style['tabsitem']} ${selecttab === 3 ? style['active'] : ''}`} onClick={()=>{changeTab(3)}}>{t('cardmanage.title8')}</div> */}
						{/*	<div className={`${style['tabsitem']} ${selecttab === 4 ? style['active'] : ''}`} onClick={()=>{changeTab(4)}}>{t('cardmanage.title9')}</div> */}
						</div>
						<div className={style['form_group']}>
							{/* <div className={style['rate']}>
								當前匯率
								<span style={{ color: 'red' }}>1 USDT: 7.87</span>
							</div> */}
							<div className={style['payName']}>
								<span>{t('cardmanage.title10')}</span>
								<Input disabled value={bindbank.real_name} onChange={(e)=>setName(e.target.value)} placeholder={t('cardmanage.title11')} />
							</div>
							{
								(selecttab == 1 || selecttab == 2) ? 
								<div className={style['payName']}>
									<span>{selecttab == 1 ? t('cardmanage.title12') : selecttab == 2 ? t('cardmanage.title13'):t('cardmanage.title14')}: </span>
									<Input placeholder={t('cardmanage.title15')} onChange={(e)=>setBank(e.target.value)}/>
								</div> : ''
							}
							<div className={style['payName']}>
							<span>{t('cardmanage.title16')}</span>
							<Input placeholder={t('cardmanage.title17')} onChange={(e)=>setUsername(e.target.value)}/>
							</div>
							<div className={style['BtnSubmit']}>
								<div className={style['btns']} onClick={()=>submit()}>{t('cardmanage.title18')}</div>
							</div>
						</div>
					</div>
				</div>
			</Modal>
		</React.Fragment>
	)
}


export default Cardmanage
